<template>
  <!-- 购物车 -->
  <div>
    <div id="page">
      <!-- 顶部 -->
      <div id="header_top">
        <h2>购物车</h2>
        <p>
          <span class="iconfont">&#xe64a;</span>
          <span class="iconfont">&#xe614;</span>
          <i class="line"></i>
        </p>
      </div>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li>
            <a href="#" class="cur"><i></i>全部(20)</a>
          </li>
          <li><a href="#">降价(4)</a></li>
          <li><a href="#">常卖(2)</a></li>
          <li><a href="#" class="iconfont">&#xe655;&ensp;分类</a></li>
        </ul>
      </nav>
      <!-- 主体 -->
      <main>
        <!-- 小U自营 -->
        <div v-show="users.token">
          <p id="store">
            <em class="circle box">
              <input
                type="checkbox"
                v-model="checkall"
                @change="checkalls()"
                id="b"
              />
              <label for="b"></label>
            </em>
            <span>&nbsp;小U自营</span><em>已免运费</em><b></b><a href="#">领券</a>
          </p>
          <ul class="self" id="ziying">
            <li v-for="(item, index) in list" :key="item.id">
              <span class="circle box">
                <input
                  type="checkbox"
                  v-model="item.istrue"
                  @change="changeone()"
                  :id="'abc' + index"
                />
                <label :for="'abc' + index"></label>
              </span>
              <img :src="$pre + item.img" alt="" />
              <div class="content">
                <h3>{{ item.goodsname }}</h3>
                <p>敏感肌可用，控油祛痘、男女...</p>
                <p class="capacity">
                  <button class="dels" @click="del(item.id)">删除</button>
                </p>
                <p class="limit">比加入时降低￥100</p>
                <p class="price">
                  <em>￥</em><i>{{ item.price }}</i
                  ><del>￥{{ item.price + 100 }}</del
                  ><b @click="pre(item.id, index)">-</b
                  ><span>{{ item.num }}</span
                  ><b @click="add(item.id, index)">+</b>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div v-show="!users.token">
          <van-empty description="您还未登录" />
        </div>
        <!-- 品牌精选 -->
      </main>
      <!-- 结算 -->
      <div id="settlement">
        <i class="box">
          <input
            type="checkbox"
            v-model="checkall"
            @change="checkalls()"
            id="a"
          /><label for="a"></label>
        </i>
        <p>全选</p>
        <p>
          <span>合计</span>
          <span>已免运费</span>
        </p>
        <p>
          <span>￥{{ addalls }}</span>
          <span>以优惠￥{{ ypus }}元</span>
        </p>
        <p @click="order()" class="jie">去结算</p>
      </div>
    </div>
  </div>
</template>

<script>
import { cartList, cartEdit, cartDelete } from "../../../utils/api";
import { Toast } from "vant";
export default {
  props: [],
  components: {},
  data() {
    return {
      users: {},
      list: [],
      checkall: false,
    };
  },
  methods: {
    //++添加
    add(id, index) {
      if (this.list[index].num > 10) {
        return;
      } else {
        cartEdit({ id: id, type: 2 }).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.list[index].num++;
          }
        });
      }
    },
    //-- 减少
    pre(id, index) {
      if (this.list[index].num < 1) {
        return;
      } else {
        cartEdit({ id: id, type: 1 }).then((res) => {
          //console.log(res);
          if (res.data.code == 200) {
            this.list[index].num--;
          }
        });
      }
    },
    //单选
    changeone() {
      this.checkall = this.list.every((item) => item.istrue);
    },
    //全选
    checkalls() {
      this.list.forEach((item) => {
        item.istrue = this.checkall;
      });
    },
    order() {
      let filt = this.list.filter((item) => item.istrue)
        ? this.list.filter((item) => item.istrue)
        : [];
      if (filt.length != 0) {
        //数量
        let num = filt.length;
        //购物车id
        let id = filt
          .map((item) => {
            return item.id;
          })
          .join(",");

        let orderadd = {
          countmoney: this.addalls,
          countnumber: num,
          idstr: id,
        };
        sessionStorage.setItem("shoper", JSON.stringify(orderadd))
          ? JSON.parse(
              sessionStorage.setItem("shoper", JSON.stringify(orderadd))
            )
          : {};
        sessionStorage.setItem("shoplist", JSON.stringify(filt))
          ? JSON.parse(sessionStorage.setItem("shoplist", JSON.stringify(filt)))
          : {};

        this.$router.push("/order");
      } else {
        Toast("请选中商品");
      }
    },
    del(id) {
      cartDelete({ id: id }).then((res) => {
        // console.log(res,1314);
        if (res.data.code == 200) {
          Toast("删除成功");
          this.list = [];
        }
      });
    },
  },
  computed: {
    //合计
    addalls() {
      let add = 0;
      this.list.forEach((item) => {
        if (item.istrue) {
          add += item.price * item.num;
        }
      });
      return add;
    },
    //优惠
    ypus() {
      let sum = 0;
      this.list.forEach((item) => {
        if (item.istrue) {
          sum += item.num * 100;
        }
      });
      return sum;
    },
  },
  mounted() {
    this.users = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : {};
    if (this.users.token) {
      cartList({ uid: this.users.uid }).then((res) => {
        // console.log(res, 1212);
        let arr = res.data.list ? res.data.list : [];
        arr.map((item) => (item.istrue = false));
        this.list = arr;
      });
    }
  },
};
</script>

<style scoped>
/* 为checkbox创建外面的圆形 */
.box {
  width: 10px;
  height: 10px;
  background: rgb(243, 243, 244);
  position: relative;
  padding: 5px;
  border: 2px solid rgb(255, 96, 64);
  border-radius: 100%;
}

/* 用label创建小圆点，可以根据checkbox状态改变颜色 */
label {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: rgb(243, 243, 244);
}

/* 当复选框被选中，要改变内圈的颜色 */
input[type="checkbox"]:checked + label {
  background: rgb(255, 96, 64);
}

/* 隐藏input原始样式 */
input[type="checkbox"] {
  visibility: hidden;
}
.self li .content .price span {
  width: 0.4rem;
  margin: 0;
}
button {
  width: 0.4rem;
  height: 0.4rem;
}

.self li .content .capacity {
  height: 0.5rem;
  width: 0.9rem;
  margin-left: 2rem;
}
.self li .dels {
  height: 0.5rem;
  width: 0.9rem;
  display: inline-block;
  outline: none;
}

html,
body,
#page {
  height: 100%;
}
#page {
  margin: 0 auto;
  max-width: 7.5rem;
  display: flex;
  flex-direction: column;
}
/*top1*/
#header_top {
  height: 0.64rem;
  display: flex;
  background-color: #ff6040;
  padding: 0.45rem 0.12rem 0.32rem 0.33rem;
  color: #ffdfd8;
  font-size: 0.3rem;
  align-items: center;
  justify-content: space-between;
}
#header_top h2 {
  margin-left: 2.5rem;
}
#header_top p span.iconfont {
  font-size: 0.3rem;
  color: #ffdfd8;
}
#header_top p:nth-child(2) {
  width: 1.74rem;
  height: 0.64rem;
  border: 1px solid #ff8a6f;
  border-radius: 0.4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
#header_top p:nth-child(2) i {
  width: 1px;
  height: 0.37rem;
  background-color: #ff896e;
  position: absolute;
}
nav {
  height: 0.6rem;
  background: linear-gradient(#ff6040, #ff887d);
}
nav ul {
  display: flex;
  height: 0.6rem;
  padding: 0 0.4rem 0 0.4rem;
  justify-content: space-between;
}
nav ul li {
  height: 0.6rem;
  display: flex;
  width: 0.9rem;
  align-items: center;
}
nav ul li a {
  display: block;
  color: #fff3f2;
  font-size: 0.26rem;
  position: absolute;
}
nav ul li a.iconfont {
  color: #fff3f2;
  font-size: 0.26rem;
}
nav ul li a.cur {
  font-size: 0.3rem;
  font-weight: bold;
}
nav ul li a i {
  width: 0.5rem;
  height: 0.04rem;
  background-color: #fff;
  border-radius: 0.02rem;
  position: absolute;
  bottom: -0.1rem;
  left: 0.3rem;
}
main {
  flex: 1;
  overflow: auto;
  padding-bottom: 2.5rem;
}

main #store {
  height: 0.72rem;
  background: #fff;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
}

main #store i {
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid #999999;
  border-radius: 50%;
  background: #f2f2f2;
  margin-right: 0.21rem;
}

#store span {
  font-size: 0.3rem;
  color: #333333;
  font-weight: bold;
  margin-right: 3.19rem;
}

#store em {
  font-size: 0.22rem;
  color: #333333;
}

main #store b {
  width: 0.02rem;
  height: 0.22rem;
  background: #979797;
  margin: 0 0.21rem;
}

main #store a {
  color: #ff6c4e;
  font-size: 0.22rem;
}

.self {
  background: #fff;
  margin-bottom: 0.4rem;
  overflow: hidden;
  z-index: 1;
}

.self li {
  height: 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.2rem;
}

.self li .circle {
  color: #ff6040;
}

.self li img {
  width: 2.6rem;
  margin-right: 0.25rem;
}

.self li .content {
  height: 100%;
}

.self li .content h3 {
  color: #333333;
  font-size: 0.3rem;
  margin-bottom: 0.06rem;
}

.self li .content p {
  color: #999999;
}

.self li .content .capacity{
  width: 0.8rem;
  height: 0.32rem;
  background: #f00;
  color: #3b3b3b;
  font-size: 0.18rem;
  line-height: 0.32rem;
  margin: 0.3rem 0 0.15rem;
}
.self li .content .capacity>.dels{
  background: #f00;
  border: none;
  color: #fff;
  border-radius: 0.05rem;
}

.self li .content .capacity span {
  font-size: 0.14rem;
}

.self li .content .price {
  display: flex;
  color: #333333;
  align-items: center;
}

.self li .content .price em {
  font-size: 0.14rem;
  color: #ff6040;
}

.self li .content .price del {
  color: #999999;
  margin: 0 0.5rem 0 0.07rem;
}

.self li .content .price i {
  color: #ff6040;
  font-size: 0.3rem;
}

.self li .content .price span {
  width: 0.8rem;
  height: 0.4rem;
  background: #f2f2f2;
  text-align: center;
  line-height: 0.4rem;
  margin: 0 0.12rem;
}

.self li .content .limit {
  color: #ff8066;
  font-size: 0.18rem;
  box-sizing: border-box;
  margin: 0.2rem 0;
}
#settlement {
  width: 100vw;
  height: 1rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-top: 1px solid #cccccc;
  padding-left: 0.2rem;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 1rem;
  z-index: 2;
}
#settlement input {
  margin-right: 0.2rem;
}
#settlement p {
  white-space: nowrap;
}
#settlement p:nth-of-type(1) {
  margin: 0 1rem 0 0.01rem;
  font-size: 0.3rem;
  color: #333333;
}
#settlement p:nth-of-type(2) {
  display: flex;
  flex-direction: column;
}
#settlement p:nth-of-type(2) span:first-child {
  font-size: 0.3rem;
  color: #333333;
}
#settlement p:nth-of-type(2) span:last-child {
  font-size: 0.18rem;
  color: #9c9c9c;
}
#settlement p:nth-of-type(3) {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  margin: 0 0.2rem 0 0.3rem;
}
#settlement p:nth-of-type(3) span:nth-child(1) {
  font-size: 0.3rem;
  color: #ff6040;
}
#settlement p:nth-of-type(3) span:last-child {
  font-size: 0.18rem;
  color: #9c9c9c;
}
#settlement p:nth-of-type(4) {
  width: 2.1rem;
  height: 0.98rem;
  background-color: #ff6040;
  font-size: 0.32rem;
  color: #fff;
  text-align: center;
  line-height: 0.98rem;
}
</style>